/**
* @description: 通信网管巡视巡检工单班组成员-待执行
* @author: JiWei
* @date:
**/
<template>
	<view class="task-monitor-main">
		<nav-bar class="header" back title="待执行" @goBack="goBack" />
		<!-- banner -->
		<view class="top-banner">
			<view class="left-banner">
				<text
					class="left-banner-title">{{headerMsg.userName}}分配的{{headerMsg.distributionTime}}{{headerMsg.workOrderType}}</text>
				<text class="left-banner-time">网管执行人员：{{headerMsg.ExecutiveList}}</text>
			</view>
			<view :class="stateColor">{{state}}</view>
		</view>
		<main>
			<view class="main-top">
				<van-field v-model="roundsNum" label="巡视次数" readonly error-message-align="right">
					<template #right-icon>
						<view class="round-title">{{roundsType}}</view>
					</template>
				</van-field>
				<van-field v-model="netWorkManagement" label="网管执行人员" readonly error-message-align="right" />
				<van-field v-model="roundsTime" label="巡视时间" readonly error-message-align="right" />
			</view>
			<van-form ref="ruleForm">
				<view class="main-top">
					<van-field v-model="leaveTime" label="离开时间" placeholder="请选择离开时间"
						:rules="[{ required: true, trigger:'onSubmit'}]" input-align="right" required right-icon="arrow"
						error-message-align="right" @click="onOpenPicker('leaveTime')" />
				</view>
				<view class="main-top commonbj">
					<!--   第一层   -->
					<van-collapse v-model="activeName" accordion>
						<van-collapse-item name="1" size="large">
							<template #title>
								<view>
									<text style="color:#ff0000;margin-right:4px;">*</text>
									<text style="font-size: 14px;">国网等级</text>
								</view>
							</template>
							<!--   第二层   -->
							<van-collapse v-model="activeNames" accordion v-for="(gradeItem, gradeIndex) in gradeList"
								:key="gradeIndex">
								<van-collapse-item :name="gradeItem.ID" size="large">
									<template #title>
										<view>
											<text style="font-size: 14px;color: #417ADC;">{{ gradeItem.NAME }}</text>
										</view>
									</template>
									<template v-for="(gradeSubItem, gradeSubIndex) in gradeItem.child">
										<van-field :label="gradeSubItem.NAME" :key="gradeSubIndex" required
											:rules="[{ required: true, trigger:'onSubmit'}]">
											<template #input>
												<van-radio-group v-model="gradeSubItem.alarmState"
													direction="horizontal" :disabled="isdisabled">
													<van-radio name="0">正常
														<template #icon="props">
															<img class="img-icon"
																:src="props.checked ? activeIcon : inactiveIcon" alt=""
																@click="normalBtn(gradeSubItem)">
														</template>
													</van-radio>
													<van-radio name="1">异常
														<template #icon="props">
															<img class="img-icon"
																:src="props.checked ? selectIcon : inactiveIcon" alt=""
																@click="anomalyBtn(gradeSubItem)">
														</template>
													</van-radio>
												</van-radio-group>
											</template>
										</van-field>
										<!--  判断告警  循环告警内容 -->
										<van-collapse v-model="activePolice" v-if="gradeSubItem.alarmState === '1'">
											<van-collapse-item :name="0" size="large">
												<template #title>
													<view style="float: left;">
														<text style="font-size: 14px;">{{ titlePolice }}</text>
													</view>
												</template>

												<view class="police-main"
													v-for="(alarmItem, alarmIndex) in gradeSubItem.alarmList"
													:key="alarmIndex">

													<view class="police-top" v-if="alarmItem.state==='0' || alarmItem.state==='1'">
														<text class="police-title">告警{{alarmIndex*1+1}}</text>
														<text v-if="alarmItem.state==='0'" class="restore" @click="hanleChangeState(alarmIndex,gradeSubIndex,gradeIndex)">恢复</text>
														<text v-else class="recovered">已恢复</text>
														
													</view>
													<view class="police-top" v-else>
														<text class="police-title">告警{{alarmIndex*1+1}}</text>
														<img class="police-img" src="../../../static/img/ywsc.png"
															 alt="" @click="hanleDelete(alarmIndex,gradeSubIndex,gradeIndex)">
													</view>
													<view class="police-small-title"><text
															style="color: #ff0000;">*</text>告警照片</view>
													<div class="image-wrap" v-if="alarmItem.state==='0' || alarmItem.state==='1'">
														<div class="image-list">
															<div class="upload-button"
																v-for="(imgItem, index) in alarmItem.files">
																<img v-if="imgItem.img" :src="imgItem.img" alt="">
															</div>
														</div>
													</div>
													<div class="image-wrap" v-else>
														<div class="image-list">
															<div class="upload-button"
																v-for="(imgItem, index) in alarmItem.files"
																@click.stop="imageHandle({gradeIndex, gradeSubIndex, alarmIndex}, index, imgItem,'CHOOSE')">
																<div v-if="imgItem.img" class="delete-icon"
																	@click.stop="imageHandle({gradeIndex, gradeSubIndex, alarmIndex}, index,imgItem, 'DELETE')">
																	×</div>
																<img v-if="imgItem.img" :src="imgItem.img" alt=""
																	@click.stop="imageHandle({gradeIndex, gradeSubIndex, alarmIndex}, index,imgItem, 'PREVIEW')">
															</div>
														</div>
													</div>
													<van-divider dashed />
													<view class="remark-info-container">
														<text class="remark-title"><text
																style="color: #ff0000;">*</text>告警信息</text>
														<div class="remark-wrap">
															<van-field
															  v-model="alarmItem.explain"
															  autosize
															  label=""
															  type="textarea"
															  placeholder="这里是告警信息"
															  readonly
															   v-if="alarmItem.state==='0' || alarmItem.state==='1'"
															/>
															<van-field
															  v-model="alarmItem.explain"
															  autosize
															  label=""
															  type="textarea"
															  placeholder="这里是告警信息"
															   v-else
															/>
															
														</div>
													</view>
												</view>
												<view @click="add(gradeSubItem)" class="police-add">
													<img src="../../../static/img/yw-add.png" alt="">
													<text>新增一项</text>
												</view>
											</van-collapse-item>
										</van-collapse>
									</template>

								</van-collapse-item>
							</van-collapse>
						</van-collapse-item>
					</van-collapse>
				</view>
			</van-form>
		</main>
		<footer>
			<van-button block native-type="submit" @click="goApproval">提交</van-button>
		</footer>
		<!--时间选择器-->
		<van-popup v-model="showPicker" position="bottom">
			<van-datetime-picker :type="datepickertype" :formatter="formatter" cancel-button-text="清空"
				@confirm="onDatetimeConfirm" @cancel="onDatetimeEmpty" v-model="currentDate" :min-date="minDate" />
		</van-popup>
		<van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
			<van-swipe>
				<div v-for="(image, index) in files" :key="index">
					<van-swipe-item v-if="image.img" style="text-align: center;">
						<img :src="image.img" />
					</van-swipe-item>
				</div>
			</van-swipe>
		</van-popup>
	</view>
</template>
<script>
	import config from "../../../common/config";

	let fileTemplate = [{
			img: '', // 用来显示的照片
			type: "FIRST",
			raw: null, // raw文件
			state: '',
		},
		{
			type: "SECOND",
			raw: null, // raw文件
			img: '', // 用来显示的照片
			state: '',
		},
		{
			type: "THIRD",
			raw: null, // raw文件
			img: '', // 用来显示的照片
			state: '',
		},
	];
	import {
		Dialog,
		Toast
	} from "vant";
	import wx from "../../../static/common_js/jweixin_1.0.0";
	import navBar from "../../../components/common/nav-bar";
	import moment from "moment";
	import {
		mapGetters
	} from "vuex";
	import {
		cloneDeep
	} from 'lodash';
	import axios from 'axios'
	export default {
		name: 'netWorkMemberExecuted',
		components: {
			navBar
		},
		props: {},
		data() {
			return {
				isdisabled:false,
				baseUrl: '',
				roundsType: '',
				headerMsg: '',
				id: '',
				activeIcon: require('../../../static/img/zcxz.png'),
				inactiveIcon: require('../../../static/img/wx.png'),
				selectIcon: require('../../../static/img/ycxz.png'),
				state: '待执行',
				stateCode: '0',
				roundsNum: '一巡',
				netWorkManagement: '',
				roundsTime: '',
				leaveTime: '',
				timeString: '',
				currentDate: '',
				minDate: new Date(0),
				datepickertype: 'datetime',
				showPicker: false,
				showPreview: false,
				activeName: '1', // 一级折叠框
				activeNames: [], //二级折叠框
				activePolice: [0], // 三级折叠框
				delList: [], // 被删除的列表，需要和后台交互
				files: {},
				gradeList: [],
				titlePolice: '告警内容',
			};
		},
		onLoad(option) {
			config.getOptions.then(res => {
				this.baseUrl = res.firstUrl;
			})
			this.id = option.id;
			this.getTaskListDetail()
		},
		computed: {
			...mapGetters(['userData']),
			// 计算banner框的流程状态
			stateColor() {
				if (this.stateCode === '1') {
					return 'left-state-tg'
				} else if (this.stateCode === '2') {
					return 'left-state-jj'
				} else {
					return 'left-state-dsp'
				}
			},
		},
		watch: {},
		mounted() {},
		methods: {
      formatter(type, val) {
        if (type === 'year') return val + '年'
        if (type === 'month') return val + '月'
        if (type === 'day') return val + '日'
        if (type === 'hour') return val + '时'
        if (type === 'minute') return val + '分'
      },
      getTaskListDetail() {
        var params = {
          id: this.id
        }
        this.$api.getTaskListDetail(params).then(res => {
          const msg = res.data;
          this.headerMsg = {
            userName: msg.assignPersonnelName,
            distributionTime: msg.inspectionDay,
            workOrderType: msg.name,
            ExecutiveList: msg.executiveName
          };
          this.roundsNum = msg.inspectionNum;
          this.roundsType = moment(msg.inspectionStartDate).format('H:m')
          this.netWorkManagement = this.userData.SUERNAME;
          this.roundsTime = moment(new Date()).format("YYYY-MM-DD HH:mm")
          this.gradeList = msg.alarm;
          this.gradeList.map((item, key) => {
            this.activeNames.push(item.ID)
            item.child.map(ite => {
              ite.alarmList.map((itemF) => {
                itemF.files.map((itImg, index, arr) => {
                  arr[index].img = itImg.img ? this.baseUrl +
                      itImg.img : ''
                  return {
                    ...itImg
                  }
                })
				return itemF
              })
			  return ite
            })
			return item
          })

        })
      },
      onDatetimeConfirm(time) {
        let timeString = "";
        timeString = this.datepickertype == "datetime" ? moment(time).format('YYYY-MM-DD HH:mm') : ''
        this.leaveTime = timeString
        this.showPicker = false
      },
      onDatetimeEmpty() {
        this.pickerType === 'leaveTime' && (this.leaveTime = '')
      },
      onOpenPicker(pickerType) {
        if (pickerType === 'leaveTime') {
          this.currentDate = this.leaveTime !== '' ? new Date(this.leaveTime) : new Date()
        }
        this.showPicker = true
      },
      goBack() {
        uni.navigateTo({
          url: `/pages/operationApprove/communicationNetWorkMember/communicationNetWorkMember`
        })
      },
      // 新增告警内容
      add(gradeSubItem) {
        gradeSubItem.alarmList.push({
          sysId: gradeSubItem.ID,
          sysName: gradeSubItem.NAME,
          name: '',
          smallTitle: '告警1',
          files: cloneDeep(fileTemplate).map((fileItem, index) => {
            return {
              ...fileItem,
              type: fileItem.type + '_' + gradeSubItem.PARENT_ID + '_' + gradeSubItem.ID +
                  '_' + index,
              state: '',
            }
          }), // 照片map
          explain: ''
        })
      },
      // 删除告警内容
      hanleDelete(index,gradeSubIndex,gradeIndex) {
        Dialog.confirm({
          title: `是否确认删除`
        })
            .then(() => {
              // this.gradeList.forEach(item => {
              //   item.child.map(ite => {
              //     ite.alarmList.splice(index, 1)
              //   })
              // })
			  this.gradeList[gradeIndex].child[gradeSubIndex].alarmList.splice(index,1);
            })
            .catch(() => {
              // on cancel
            })
      },
	  hanleChangeState(index,gradeSubIndex,gradeIndex){
		  this.gradeList[gradeIndex].child[gradeSubIndex].alarmList[index].state = "1";
		  console.log(this.gradeList,"this.gradeList")
	  },
      imageHandle({
                    gradeIndex,
                    gradeSubIndex,
                    alarmIndex
                  }, imgIndex, imgItem, handleType) {
        if (handleType === 'CHOOSE') {
          this.choosePhoto({
            gradeIndex,
            gradeSubIndex,
            alarmIndex
          }, imgIndex, imgItem);
        } else if (handleType === 'PREVIEW') {
          this.files = [imgItem];
          this.showPreview = true;
        } else if (handleType === 'DELETE') {
          Dialog.confirm({
            title: `是否确认删除`
          })
              .then(() => {
                this.$set(this.gradeList[gradeIndex].child[gradeSubIndex].alarmList[alarmIndex].files,
                    imgIndex, {
                      ...this.gradeList[gradeIndex].child[gradeSubIndex].alarmList[alarmIndex].files[
                          imgIndex],
                      raw: null,
                      img: ''
                    })
                this.delList.includes(imgItem.type) ? null : this.delList.push(imgItem.type);
                this.files = imgItem
              })
              .catch(() => {
                // on cancel
              })
        }
      },
      choosePhoto({
                    gradeIndex,
                    gradeSubIndex,
                    alarmIndex
                  }, imgIndex, imgItem) {
        let _this = this;
        // fileItem.type + '_' + gradeSubItem.PARENT_ID + '_' + gradeSubItem.ID + '_' + index
        wx.chooseImage({
          count: 3,
          sourceType: ["camera"],
          success: (chooseImageRes) => {
            wx.getLocalImgData({
              localId: chooseImageRes.localIds[0].toString(),
              success: function (res) {
                const localData = res.localData;
                let imageBase64 = '';
                if (localData.indexOf('data:image') == 0) {
                  //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                  imageBase64 = localData;
                } else {
                  //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                  //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                  imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g,
                      '');
                }

                _this.$set(_this.gradeList[gradeIndex].child[gradeSubIndex].alarmList[
                    alarmIndex].files, imgIndex, {
                  raw: _this.h5_url_to_blob(imageBase64),
                  img: imageBase64,
                  type: imgItem.type,
                  state: imgItem.state
                });

                if (_this.delList.includes(imgItem.type)) {
                  _this.delList = _this.delList.filter(item => {
                    if (item === imgItem.type) {
                      return false;
                    }

                    return true;
                  });
                }
              }
            });
          },
          fail: (error) => {
              
          }
        });
      },
      h5_url_to_blob(url) {
        let arr = url.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
          type: mime
        });
      },
      // 异常
      anomalyBtn(ite) {
        ite.showPolice = true
        this.activePolice.push(ite.name)
      },
      //  正常
      normalBtn(ite) {
		  this.isdisabled = true;
		console.log(ite.alarmList,"ite111")
		
		let filterLen = ite.alarmList.filter((item)=>{
			return item.state === '0' || item.state === '1'
		});
		console.log(filterLen.length,"filterLen.length")
		if(filterLen.length>0){
			this.isdisabled = true;
			Dialog.alert({
				 message: '该系统有告警信息，不支持切换',
			})
		}else{
			ite.alarmList = []
			ite.showPolice = false
			this.isdisabled = false;
		}
		
		
		
       
      },
      addNetWork() {
        Toast.loading({
          duration: 0,
          message: '加载中...',
          forbidClick: true,
        });
        let params = {
          id: this.id, // 工单id
          executionTime: this.roundsTime, // 巡视时间
          leaveTime: this.leaveTime,
          executionPersonId: this.userData.USERID, // 执行人员id
          executionPersonName: this.userData.SUERNAME, // 执行人员名
          gradeList: this.gradeList
        }
        let param = new FormData()
        let requestParams = {
          params: JSON.stringify(params),
        }
        param.append('wgxsxj', requestParams.params) // 添加form表单中其他数据
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data',
			Authorization: uni.getStorageSync('token') || ''
          }
        }
        let url = "";
        // #ifndef IGW
        url = "/ap/txksh/kosinManage/rest/approve/XSXJ/executeWork";
        // #endif
        // #ifdef IGW
        url = `${this.baseUrl}/txksh/kosinManage/rest/approve/XSXJ/executeWork`
        // url = `http://172.16.4.44:8080/txksh/kosinManage/rest/approve/XSXJ/executeWork`
        // #endif
        axios.post(url, param, config).then(res => {
          Toast.clear();
          if (res.data.code == 0) {
            uni.navigateTo({
              url: `/pages/operationApprove/communicationNetWorkMember/communicationNetWorkMember`
            });
          } else {
            Toast.clear();
            Toast('提交失败');
          }
        })

      },
      goApproval() {
        this.$refs.ruleForm.validate().then(() => {
          this.addNetWork()
        }).catch(() => {
          Toast('请完善内容');
        })
      }
    }
	};
</script>
<style scoped lang="scss">
	.task-monitor-main {
		height: 100vh;
		background: #F2F6FA;
		display: flex;
		flex-direction: column;

		.top-banner {
			flex-shrink: 0;
			width: px2vw(1080);
			// height: px2vh(190);
			height: px2vh(240);
			background: #fff;
			display: flex;
			margin-bottom: px2vw(30);

			.left-banner {
				flex: 1;
				// width: px2vw(600);
				margin-top: px2vh(47);
				height: px2vh(98);
				float: left;
				margin-left: px2vh(50);

				.left-banner-title {
					display: block;
					font-size: px2vw(42);
					color: #417ADC;
				}

				.left-banner-time {
					font-size: px2vw(36);
					color: #666;
				}

			}

			.left-state-dsp,
			.left-state-tg,
			.left-state-jj {
				width: px2vw(220);
				flex-shrink: 0;
				height: px2vh(80);
				margin-right: px2vh(30);
				margin-top: px2vh(55);
				float: right;
				font-size: px2vw(42);
				font-weight: 700;
				border-radius: px2vw(40);
				text-align: center;
				line-height: px2vh(80);
			}

			.left-state-tg {
				color: #3CDA68;
				background: rgba(62, 218, 104, 0.1);
			}

			.left-state-dsp {
				background-color: #417ADC;
				color: #FFFFFF;
			}

			.left-state-jj {
				color: #FFAD0E;
				background: rgba(255, 180, 0, 0.1);
			}
		}

		main {
			width: calc(100% - #{px2vw(60)});
			flex: 1;
			margin: auto;
			overflow-x: hidden;
			overflow-y: scroll;

			.commonbj {

				background-color: #fff;
				margin-bottom: px2vh(30);

				.round-title {
					width: px2vh(110);
					height: px2vh(50);
					line-height: px2vh(50);
					font-size: px2vh(36);
					text-align: center;
					color: #417ADC;
					border-radius: px2vh(10);
					background: rgba(65, 122, 220, .1)
				}

				.img-icon {
					height: px2vh(40);
				}

				.select_content_tabs {
					.commonbj {
						background-color: #fff;
						margin-bottom: px2vh(30);

						/deep/.van-collapse-item__content {
							padding: 0 px2vh(30);
						}
					}

					/deep/.van-tabs__wrap {
						display: none !important;

					}

					/deep/.van-tabs__content {
						margin-top: px2vh(100);
					}


					/deep/.van-radio--horizontal {
						margin-right: px2vh(5);
					}

					/deep/.van-radio--horizontal:last-child {
						margin-right: 0;
					}

				}

				.contentbj {
					background-color: #F2F6FA;


				}

				.tabbarlist {
					height: px2vh(100);
					width: px2vh(920);
					border-radius: px2vh(20);
					margin: 0 auto;
					display: flex;

					view {
						flex: 1;
						flex-shrink: 0;
						width: px2vh(305);
						height: px2vh(100);
						margin-top: px2vh(50);
						line-height: px2vh(100);
						display: inline-block;
						text-align: center;
						color: #417ADC;
						font-size: px2vh(40);
						background-color: rgba(65, 122, 220, 0.1);
						border-right: px2vh(1) solid #C9CED6;

						text {
							width: px2vh(30);
							height: px2vh(30);
							display: inline-block;
							margin-right: px2vh(14);
						}

						text.executed {
							background: #FFAD0E;
						}

						text.exceedtime {
							background: #FF4355;
						}

						text.finished {
							background: #41DC83;
						}
					}


					view:last-child {
						border-right: none;
					}

					.active {
						color: #FFFFFF;
						background: #417ADC;
					}
				}

				.custom-title {
					display: flex;
					align-items: center;

					img {
						width: px2vh(42);
						margin-right: px2vw(29);
					}
				}
			}

			.main-top {
				overflow: hidden;
				border-radius: px2vh(20);
				margin-bottom: px2vh(30);

				.round-title {
					color: #417ADC;
					padding: px2vw(10) px2vh(26);
					border-radius: px2vh(10);
					background: rgba(65, 122, 220, .1)
				}

				.img-icon {
					height: px2vh(40);
				}

				.police-main {
					background: #f5f5f5;
					border-radius: px2vh(10);
					margin-bottom: px2vh(20);
					padding-bottom: px2vh(30);

					.police-top {
						height: px2vh(60);
						padding-top: px2vh(55);
						padding-bottom: px2vh(55);
						margin: auto;

						.police-title {
							color: #666;
							margin-left: px2vw(69);
						}

						.police-img {
							height: px2vh(40);
							float: right;
							margin-right: px2vw(40);
						}
						
						.restore{
							// width: px2vh(84);
							height: px2vh(56);
							padding: 0 10px;
							box-sizing: border-box;
							background-color: #FF7070;
							border-radius: px2vh(10);
							color: #fff;
							float: right;
							margin-right: px2vw(40);
						}
							
						.recovered{
							// width: px2vh(84);
							height: px2vh(56);
							padding: 0 10px;
							box-sizing: border-box;
							background-color: rgba(255,112,112,0.1);
							border-radius: px2vh(10);
							color: #FF7070;
							float: right;
							margin-right: px2vw(40);
						}
					}

					.police-small-title {
						color: #666;
						font-size: 14px;
						margin-left: px2vw(69);
						margin-bottom: px2vh(20);
					}

					.image-wrap {
						width: 100%;
						display: flex;

						.image-list {
							width: 100%;
							display: flex;

							img {
								width: px2vw(215);
								height: px2vw(215);
								margin-right: px2vw(40);
								border-radius: px2vw(6);
							}

							.upload-button {
								width: px2vw(215);
								height: px2vw(215);
								background-size: cover;
								margin-right: px2vw(40);
								position: relative;
								background-image: url('../../../static/img/ywgj.png');

								.delete-icon {
									position: absolute;
									top: px2vw(-20);
									right: px2vw(-20);
									width: px2vw(40);
									height: px2vw(40);
									background-color: rgba(0, 0, 0, 0.7);
									border-radius: 50%;
									color: #fff;
									display: flex;
									justify-content: center;
									align-items: center;
								}
							}

							.upload-button:first-child {
								margin-left: px2vw(60);
							}
						}

					}

					.remark-info-container {
						color: #666666;
						border-radius: px2vw(20);
						overflow: hidden;
						margin-top: px2vh(63);

						.remark-title {
							display: block;
							margin-left: px2vw(69);
							margin-bottom: px2vh(52);
						}

						.remark-wrap {
							width: px2vw(748);
							background-color: #E6E6E6;
							margin: auto;
							border-radius: px2vw(20);
							padding: px2vh(20);
							/deep/.van-cell{
								background:#E6E6E6
							}
							/deep/.van-field__control{
								text-align: left;
							}
							.remark-text {
								width: 100%;
								height: px2vh(285);
							}
						}
					}
				}

				.police-add {
					height: px2vh(112);
					background: #f5f5f5;
					border-radius: px2vh(10);
					text-align: center;
					font-size: px2vw(42);
					color: #417ADC;
					line-height: px2vh(112);

					img {
						height: px2vw(28);
						margin-right: px2vw(8);
					}
				}
			}

			/deep/ .van-field__control {
				text-align: right;
			}

			/deep/.van-collapse-item__content {
				padding: 0 px2vh(30);
			}

			/deep/ .van-cell--large {
				// padding-left: px2vh(10);
			}

			/deep/.van-field__label {
				width: 10em;
				// flex:1;
			}

			/deep/.van-field__value {
				// width: 11.5em;
				// flex:.9;
			}

			/deep/.van-collapse-item__content {
				padding-left: px2vw(30);
			}

			// /deep/.uni-textarea-textarea,.uni-textarea-placeholder{
			// 	padding: px2vh(30);
			// }
		}

		footer {
			flex-shrink: 0;
			height: px2vh(155);
			background: #f2f6fa;
			padding-top: px2vh(45);

			/deep/ .van-button {
				width: calc(100% - #{px2vw(60)});
				margin-left: px2vh(30);
				height: px2vh(120);
				color: #fff;
				background-color: #417ADC;
				border: 1px solid #417ADC;
				border-radius: px2vh(60);
			}
		}

		.van-preview-wrap {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.van-swipe {
				width: 100%;
				height: 60%;

				.van-swipe-item {
					display: flex;
					align-items: center;

					img {
						width: 100%;
					}
				}
			}
		}

		.van-popup {
			background-color: #eee;

			.van-cell {
				position: absolute;
				bottom: 0;
				border-top: 4px solid #eee;
				z-index: 3;
			}
		}
	}
</style>
